Menus

A Menu offers a list of actions or functions that a user can access.

Dropdowndev ready

Preview

Code

<div class="slds-dropdown-trigger slds-dropdown-trigger--click slds-is-open" aria-expanded="true">
  <button class="slds-button slds-button--icon-border-filled" aria-haspopup="true">
    <svg aria-hidden="true" class="slds-button__icon slds-button__icon--hint">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
    </svg>
    <span class="slds-assistive-text">Show More</span>
  </button>
  <div class="slds-dropdown slds-dropdown--left">
    <ul class="dropdown__list" role="menu">
      <li class="slds-dropdown__item">
        <a href="#void" role="menuitem">
          <p class="slds-truncate">Menu Item One</p>
        </a>
      </li>
      <li class="slds-dropdown__item">
        <a href="#void" role="menuitem">
          <p class="slds-truncate">Menu Item Two</p>
        </a>
      </li>
      <li class="slds-dropdown__item">
        <a href="#void" role="menuitem">
          <p class="slds-truncate">Menu Item Three</p>
        </a>
      </li>
      <li class="slds-dropdown__item slds-has-divider--top-space">
        <a href="#void" role="menuitem">
          <p class="slds-truncate">Menu Item Four</p>
        </a>
      </li>
    </ul>
  </div>
</div>

Icons can be included on either the right, left, or both sides of an option. When checkmark icons are used, they are hidden when not selected using opacity: 0;. When selected, aria-selected="true" is placed on the parent li.

Dropdown Positioningdev ready

Preview

Code

<div class="slds-dropdown-trigger slds-dropdown-trigger--click slds-is-open" aria-expanded="true">
  <button class="slds-button slds-button--icon-container" aria-haspopup="true">
    <svg aria-hidden="true" class="slds-button__icon">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#settings"></use>
    </svg>
    <span class="slds-assistive-text">Settings</span>
  </button>
  <div class="slds-dropdown slds-dropdown--left slds-nubbin--top-left">
    <ul class="dropdown__list" role="menu">
      <li class="slds-dropdown__item">
        <a href="#void" role="menuitem">
          <p class="slds-truncate">Menu Item One</p>
        </a>
      </li>
      <li class="slds-dropdown__item">
        <a href="#void" role="menuitem">
          <p class="slds-truncate">Menu Item Two</p>
        </a>
      </li>
      <li class="slds-dropdown__item">
        <a href="#void" role="menuitem">
          <p class="slds-truncate">Menu Item Three</p>
        </a>
      </li>
    </ul>
  </div>
</div>

Positioning helpers allow the developer to position a dropdown menu. The default location is top and center. When the dropdown is activated, it is at the center base of the target and expands down.

A dropdown may also be positioned with the bottom above its target using slds-dropdown--bottom. Horizontal modifiers can be added to either top or bottom positioned dropdowns using slds-dropdown--left or slds-dropdown--right.

Dropdown Heightdev readyNot Compatible with S1 Mobile

Preview

Code

<div class="slds-dropdown-trigger slds-dropdown-trigger--click slds-is-open" aria-expanded="true">
  <button class="slds-button slds-button--icon-border-filled" aria-haspopup="true">
    <svg aria-hidden="true" class="slds-button__icon slds-button__icon--hint">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
    </svg>
    <span class="slds-assistive-text">Show More</span>
  </button>
  <div class="slds-dropdown slds-dropdown--left slds-dropdown--small">
    <ul class="dropdown__list slds-dropdown--length-5" role="menu">
      <li class="slds-dropdown__item">
        <a href="#void" role="menuitem">
          <p class="slds-truncate">Menu Item One</p>
        </a>
      </li>
      <li class="slds-dropdown__item">
        <a href="#void" role="menuitem">
          <p class="slds-truncate">Menu Item Two</p>
        </a>
      </li>
      <li class="slds-dropdown__item">
        <a href="#void" role="menuitem">
          <p class="slds-truncate">Menu Item Three</p>
        </a>
      </li>
      <li class="slds-dropdown__item">
        <a href="#void" role="menuitem">
          <p class="slds-truncate">Menu Item Four</p>
        </a>
      </li>
      <li class="slds-dropdown__item">
        <a href="#void" role="menuitem">
          <p class="slds-truncate">Menu Item Five</p>
        </a>
      </li>
      <li class="slds-dropdown__item">
        <a href="#void" role="menuitem">
          <p class="slds-truncate">Menu Item Six</p>
        </a>
      </li>
      <li class="slds-dropdown__item">
        <a href="#void" role="menuitem">
          <p class="slds-truncate">Menu Item Seven</p>
        </a>
      </li>
      <li class="slds-dropdown__item">
        <a href="#void" role="menuitem">
          <p class="slds-truncate">Menu Item Eight</p>
        </a>
      </li>
      <li class="slds-dropdown__item">
        <a href="#void" role="menuitem">
          <p class="slds-truncate">Menu Item Nine</p>
        </a>
      </li>
      <li class="slds-dropdown__item">
        <a href="#void" role="menuitem">
          <p class="slds-truncate">Menu Item Ten</p>
        </a>
      </li>
    </ul>
  </div>
</div>

Picklistdev readyNot Compatible with S1 Mobile

Preview

Code

<div class="slds-picklist slds-dropdown-trigger slds-dropdown-trigger--click slds-is-open" aria-expanded="true">
  <button class="slds-button slds-button--neutral slds-picklist__label" aria-haspopup="true">
    <span class="slds-truncate">Select an Option</span>
    <svg aria-hidden="true" class="slds-icon">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
    </svg>
  </button>
  <div class="slds-dropdown slds-dropdown--left slds-dropdown--menu">
    <ul class="slds-dropdown__list slds-dropdown--length-5" role="menu">
      <li id="menu-40-0" class="slds-dropdown__item">
        <a href="#void" role="menuitemradio">
          <p class="slds-truncate">
            <svg aria-hidden="true" class="slds-icon slds-icon--selected slds-icon--x-small slds-icon-text-default slds-m-right--x-small">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
            </svg>Option A</p>
        </a>
      </li>
      <li id="menu-41-1" class="slds-dropdown__item">
        <a href="#void" role="menuitemradio">
          <p class="slds-truncate">
            <svg aria-hidden="true" class="slds-icon slds-icon--selected slds-icon--x-small slds-icon-text-default slds-m-right--x-small">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
            </svg>Option B</p>
        </a>
      </li>
      <li id="menu-42-2" class="slds-dropdown__item">
        <a href="#void" role="menuitemradio">
          <p class="slds-truncate">
            <svg aria-hidden="true" class="slds-icon slds-icon--selected slds-icon--x-small slds-icon-text-default slds-m-right--x-small">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
            </svg>Option C</p>
        </a>
      </li>
      <li id="menu-43-3" class="slds-dropdown__item">
        <a href="#void" role="menuitemradio">
          <p class="slds-truncate">
            <svg aria-hidden="true" class="slds-icon slds-icon--selected slds-icon--x-small slds-icon-text-default slds-m-right--x-small">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
            </svg>Option D</p>
        </a>
      </li>
      <li id="menu-44-4" class="slds-dropdown__item">
        <a href="#void" role="menuitemradio">
          <p class="slds-truncate">
            <svg aria-hidden="true" class="slds-icon slds-icon--selected slds-icon--x-small slds-icon-text-default slds-m-right--x-small">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
            </svg>Option E</p>
        </a>
      </li>
      <li id="menu-45-5" class="slds-dropdown__item">
        <a href="#void" role="menuitemradio">
          <p class="slds-truncate">
            <svg aria-hidden="true" class="slds-icon slds-icon--selected slds-icon--x-small slds-icon-text-default slds-m-right--x-small">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
            </svg>Option F</p>
        </a>
      </li>
      <li id="menu-46-6" class="slds-dropdown__item">
        <a href="#void" role="menuitemradio">
          <p class="slds-truncate">
            <svg aria-hidden="true" class="slds-icon slds-icon--selected slds-icon--x-small slds-icon-text-default slds-m-right--x-small">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
            </svg>Option G</p>
        </a>
      </li>
      <li id="menu-47-7" class="slds-dropdown__item">
        <a href="#void" role="menuitemradio">
          <p class="slds-truncate">
            <svg aria-hidden="true" class="slds-icon slds-icon--selected slds-icon--x-small slds-icon-text-default slds-m-right--x-small">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
            </svg>Option H</p>
        </a>
      </li>
      <li id="menu-48-8" class="slds-dropdown__item">
        <a href="#void" role="menuitemradio">
          <p class="slds-truncate">
            <svg aria-hidden="true" class="slds-icon slds-icon--selected slds-icon--x-small slds-icon-text-default slds-m-right--x-small">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
            </svg>Option I</p>
        </a>
      </li>
      <li id="menu-49-9" class="slds-dropdown__item">
        <a href="#void" role="menuitemradio">
          <p class="slds-truncate">
            <svg aria-hidden="true" class="slds-icon slds-icon--selected slds-icon--x-small slds-icon-text-default slds-m-right--x-small">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
            </svg>Option J</p>
        </a>
      </li>
      <li id="menu-50-10" class="slds-dropdown__item">
        <a href="#void" role="menuitemradio">
          <p class="slds-truncate">
            <svg aria-hidden="true" class="slds-icon slds-icon--selected slds-icon--x-small slds-icon-text-default slds-m-right--x-small">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
            </svg>Option K</p>
        </a>
      </li>
      <li id="menu-51-11" class="slds-dropdown__item">
        <a href="#void" role="menuitemradio">
          <p class="slds-truncate">
            <svg aria-hidden="true" class="slds-icon slds-icon--selected slds-icon--x-small slds-icon-text-default slds-m-right--x-small">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
            </svg>Option L</p>
        </a>
      </li>
      <li id="menu-52-12" class="slds-dropdown__item">
        <a href="#void" role="menuitemradio">
          <p class="slds-truncate">
            <svg aria-hidden="true" class="slds-icon slds-icon--selected slds-icon--x-small slds-icon-text-default slds-m-right--x-small">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
            </svg>Option MNOPQRSTUVWXYZ 123456</p>
        </a>
      </li>
    </ul>
  </div>
</div>

A picklist is a list of actionable items that is invoked by selection of a particular item. That value is then shown as selected and its value is updated within the slds-picklist__label. The picklist menu options are usually displayed within a slds-dropdown as its presentation layer and will scroll if there are more than five items included.

Picklist Multi Selectdev readyNot Compatible with S1 Mobile

Preview

Code

<div class="slds-picklist slds-dropdown-trigger slds-dropdown-trigger--click slds-is-open" aria-expanded="true">
  <button class="slds-button slds-button--neutral slds-picklist__label" aria-haspopup="true">
    <span class="slds-truncate">2 options selected</span>
    <svg aria-hidden="true" class="slds-icon">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
    </svg>
  </button>
  <div class="slds-dropdown slds-dropdown--left">
    <ul class="dropdown__list slds-dropdown--length-5" role="menu">
      <li class="slds-dropdown__item">
        <a href="#void" role="menuitemradio">
          <p class="slds-truncate">
            <svg aria-hidden="true" class="slds-icon slds-icon--selected slds-icon--x-small slds-icon-text-default slds-m-right--small">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
            </svg>All</p>
        </a>
      </li>
      <li class="slds-dropdown__item">
        <a href="#void" role="menuitemradio">
          <p class="slds-truncate">
            <svg aria-hidden="true" class="slds-icon slds-icon--selected slds-icon--x-small slds-icon-text-default slds-m-right--small">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
            </svg>Option A</p>
        </a>
      </li>
      <li class="slds-dropdown__item slds-is-selected" aria-selected="true">
        <a href="#void" role="menuitemradio">
          <p class="slds-truncate">
            <svg aria-hidden="true" class="slds-icon slds-icon--selected slds-icon--x-small slds-icon-text-default slds-m-right--small">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
            </svg>Option B</p>
        </a>
      </li>
      <li class="slds-dropdown__item slds-is-selected" aria-selected="true">
        <a href="#void" role="menuitemradio">
          <p class="slds-truncate">
            <svg aria-hidden="true" class="slds-icon slds-icon--selected slds-icon--x-small slds-icon-text-default slds-m-right--small">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
            </svg>Option C</p>
        </a>
      </li>
      <li class="slds-dropdown__item">
        <a href="#void" role="menuitemradio">
          <p class="slds-truncate">
            <svg aria-hidden="true" class="slds-icon slds-icon--selected slds-icon--x-small slds-icon-text-default slds-m-right--small">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
            </svg>Option D</p>
        </a>
      </li>
      <li class="slds-dropdown__item">
        <a href="#void" role="menuitemradio">
          <p class="slds-truncate">
            <svg aria-hidden="true" class="slds-icon slds-icon--selected slds-icon--x-small slds-icon-text-default slds-m-right--small">
              <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
            </svg>Option E</p>
        </a>
      </li>
    </ul>
  </div>
</div>
<div class="slds-pill_container--bare">
  <span class="slds-pill">
    <span class="slds-pill__label">Option B</span>
    <button class="slds-button slds-button--icon-bare slds-pill__remove">
      <svg aria-hidden="true" class="slds-button__icon">
        <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
      </svg>
      <span class="slds-assistive-text">Remove Option B</span>
    </button>
  </span>
  <span class="slds-pill">
    <span class="slds-pill__label">Option C</span>
    <button class="slds-button slds-button--icon-bare slds-pill__remove">
      <svg aria-hidden="true" class="slds-button__icon">
        <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
      </svg>
      <span class="slds-assistive-text">Remove Option C</span>
    </button>
  </span>
</div>

A multi-select picklist is a list of actionable items that is invoked by selection of a particular item(s). The multi-select picklist can have more than one selected option. When more than one option has been selected, the .slds-picklist__label test should update with the total number of selected items, such as "3 options selected". When the picklist loses focus but has items selected, a .slds-pill_container--bare should be display below the .slds-picklist__label with the selected items in pills, allowing a user to easily remove selected items.

Search Overflowdev ready

Preview

Code

<div class="slds-dropdown-trigger slds-dropdown-trigger--click slds-is-open" aria-expanded="true">
  <button class="slds-button slds-button--icon-border-filled" aria-haspopup="true">
    <svg aria-hidden="true" class="slds-button__icon slds-button__icon--hint">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
    </svg>
    <span class="slds-assistive-text">Show More</span>
  </button>
  <div class="slds-dropdown slds-dropdown--left slds-text-heading--label">
    <ul class="dropdown__list" role="menu">
      <li class="slds-dropdown__item">
        <a href="#void" role="menuitem">
          <p class="slds-truncate">
            <svg aria-hidden="true" class="slds-icon slds-icon--small slds-icon-standard-account slds-m-right--small">
              <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
            </svg>Accounts</p>
        </a>
      </li>
      <li class="slds-dropdown__item">
        <a href="#void" role="menuitem">
          <p class="slds-truncate">
            <svg aria-hidden="true" class="slds-icon slds-icon--small slds-icon-standard-approval slds-m-right--small">
              <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#approval"></use>
            </svg>Approvals</p>
        </a>
      </li>
      <li class="slds-dropdown__item">
        <a href="#void" role="menuitem">
          <p class="slds-truncate">
            <svg aria-hidden="true" class="slds-icon slds-icon--small slds-icon-standard-lead slds-m-right--small">
              <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#lead"></use>
            </svg>Lead</p>
        </a>
      </li>
      <li class="slds-dropdown__item">
        <a href="#void" role="menuitem">
          <p class="slds-truncate">
            <svg aria-hidden="true" class="slds-icon slds-icon--small slds-icon-standard-opportunity slds-m-right--small">
              <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#opportunity"></use>
            </svg>Opportunities</p>
        </a>
      </li>
      <li class="slds-dropdown__item">
        <a href="#void" role="menuitem">
          <p class="slds-truncate">
            <svg aria-hidden="true" class="slds-icon slds-icon--small slds-icon-standard-product slds-m-right--small">
              <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#product"></use>
            </svg>Products</p>
        </a>
      </li>
    </ul>
  </div>
</div>

Action Overflowdev ready

Preview

Code

<div class="slds-dropdown-trigger slds-dropdown-trigger--click slds-is-open" aria-expanded="true">
  <button class="slds-button slds-button--icon-border-filled slds-button--icon-x-small" aria-haspopup="true">
    <svg aria-hidden="true" class="slds-button__icon slds-button__icon--hint slds-button__icon--small">
      <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
    </svg>
    <span class="slds-assistive-text">Show More</span>
  </button>
  <div class="slds-dropdown slds-dropdown--left slds-dropdown--actions">
    <ul class="dropdown__list" role="menu">
      <li class="slds-dropdown__item">
        <a href="#void" role="menuitem">
          <p class="slds-truncate">Action One</p>
        </a>
      </li>
      <li class="slds-dropdown__item">
        <a href="#void" role="menuitem">
          <p class="slds-truncate">Action Two</p>
        </a>
      </li>
      <li class="slds-dropdown__item">
        <a href="#void" role="menuitem">
          <p class="slds-truncate">Action Three</p>
        </a>
      </li>
    </ul>
  </div>
</div>

An action overflow is a list of actions that are usually secondary or tertiary to a task. These are usually utility actions like edit, delete, etc.

Action Overflow For Touchdev readyNot Compatible with S1 Mobile

Preview

Code

<div>
  <div aria-hidden="false" role="dialog" class="slds-action-overflow--touch">
    <div class="slds-action-overflow--touch__container">
      <div class="slds-action-overflow--touch__content">
        <div class="slds-action-overflow--touch__body">
          <ul role="menu" class="slds-list--vertical slds-has-block-links--space slds-has-dividers--bottom">
            <li class="slds-list__item">
              <a role="menuitem" href="#void">
                <p class="slds-truncate">
                  <span class="slds-icon_container slds-icon_container--circle slds-icon-action-share-post slds-m-right--medium">
                    <svg aria-hidden="true" class="slds-icon slds-icon--small">
                      <use xlink:href="/assets/icons/action-sprite/svg/symbols.svg#share_post"></use>
                    </svg>
                  </span>
                  <span>Post</span>
                </p>
              </a>
            </li>
            <li class="slds-list__item">
              <a role="menuitem" href="#void">
                <p class="slds-truncate">
                  <span class="slds-icon_container slds-icon_container--circle slds-icon-action-new-task slds-m-right--medium">
                    <svg aria-hidden="true" class="slds-icon slds-icon--small">
                      <use xlink:href="/assets/icons/action-sprite/svg/symbols.svg#new_task"></use>
                    </svg>
                  </span>
                  <span>New Task</span>
                </p>
              </a>
            </li>
            <li class="slds-list__item">
              <a role="menuitem" href="#void">
                <p class="slds-truncate">
                  <span class="slds-icon_container slds-icon_container--circle slds-icon-action-new-contact slds-m-right--medium">
                    <svg aria-hidden="true" class="slds-icon slds-icon--small">
                      <use xlink:href="/assets/icons/action-sprite/svg/symbols.svg#new_contact"></use>
                    </svg>
                  </span>
                  <span>New Contact</span>
                </p>
              </a>
            </li>
            <li class="slds-list__item">
              <a role="menuitem" href="#void">
                <p class="slds-truncate">
                  <span class="slds-icon_container slds-icon_container--circle slds-icon-action-new-opportunity slds-m-right--medium">
                    <svg aria-hidden="true" class="slds-icon slds-icon--small">
                      <use xlink:href="/assets/icons/action-sprite/svg/symbols.svg#new_opportunity"></use>
                    </svg>
                  </span>
                  <span>New Opportunity</span>
                </p>
              </a>
            </li>
            <li class="slds-list__item">
              <a role="menuitem" href="#void">
                <p class="slds-truncate">
                  <span class="slds-icon_container slds-icon_container--circle slds-icon-action-lead-convert slds-m-right--medium">
                    <svg aria-hidden="true" class="slds-icon slds-icon--small">
                      <use xlink:href="/assets/icons/action-sprite/svg/symbols.svg#lead_convert"></use>
                    </svg>
                  </span>
                  <span>Convert</span>
                </p>
              </a>
            </li>
            <li class="slds-list__item">
              <a role="menuitem" href="#void">
                <p class="slds-truncate">
                  <span class="slds-icon_container slds-icon_container--circle slds-icon-action-edit slds-m-right--medium">
                    <svg aria-hidden="true" class="slds-icon slds-icon--small">
                      <use xlink:href="/assets/icons/action-sprite/svg/symbols.svg#edit"></use>
                    </svg>
                  </span>
                  <span>Edit</span>
                </p>
              </a>
            </li>
            <li class="slds-list__item">
              <a role="menuitem" href="#void">
                <p class="slds-truncate">
                  <span class="slds-icon_container slds-icon_container--circle slds-icon-action-share-post slds-m-right--medium">
                    <svg aria-hidden="true" class="slds-icon slds-icon--small">
                      <use xlink:href="/assets/icons/action-sprite/svg/symbols.svg#share_post"></use>
                    </svg>
                  </span>
                  <span>Post</span>
                </p>
              </a>
            </li>
            <li class="slds-list__item">
              <a role="menuitem" href="#void">
                <p class="slds-truncate">
                  <span class="slds-icon_container slds-icon_container--circle slds-icon-action-new-task slds-m-right--medium">
                    <svg aria-hidden="true" class="slds-icon slds-icon--small">
                      <use xlink:href="/assets/icons/action-sprite/svg/symbols.svg#new_task"></use>
                    </svg>
                  </span>
                  <span>New Task</span>
                </p>
              </a>
            </li>
            <li class="slds-list__item">
              <a role="menuitem" href="#void">
                <p class="slds-truncate">
                  <span class="slds-icon_container slds-icon_container--circle slds-icon-action-new-contact slds-m-right--medium">
                    <svg aria-hidden="true" class="slds-icon slds-icon--small">
                      <use xlink:href="/assets/icons/action-sprite/svg/symbols.svg#new_contact"></use>
                    </svg>
                  </span>
                  <span>New Contact</span>
                </p>
              </a>
            </li>
            <li class="slds-list__item">
              <a role="menuitem" href="#void">
                <p class="slds-truncate">
                  <span class="slds-icon_container slds-icon_container--circle slds-icon-action-new-opportunity slds-m-right--medium">
                    <svg aria-hidden="true" class="slds-icon slds-icon--small">
                      <use xlink:href="/assets/icons/action-sprite/svg/symbols.svg#new_opportunity"></use>
                    </svg>
                  </span>
                  <span>New Opportunity</span>
                </p>
              </a>
            </li>
            <li class="slds-list__item">
              <a role="menuitem" href="#void">
                <p class="slds-truncate">
                  <span class="slds-icon_container slds-icon_container--circle slds-icon-action-lead-convert slds-m-right--medium">
                    <svg aria-hidden="true" class="slds-icon slds-icon--small">
                      <use xlink:href="/assets/icons/action-sprite/svg/symbols.svg#lead_convert"></use>
                    </svg>
                  </span>
                  <span>Convert</span>
                </p>
              </a>
            </li>
            <li class="slds-list__item">
              <a role="menuitem" href="#void">
                <p class="slds-truncate">
                  <span class="slds-icon_container slds-icon_container--circle slds-icon-action-edit slds-m-right--medium">
                    <svg aria-hidden="true" class="slds-icon slds-icon--small">
                      <use xlink:href="/assets/icons/action-sprite/svg/symbols.svg#edit"></use>
                    </svg>
                  </span>
                  <span>Edit</span>
                </p>
              </a>
            </li>
            <li class="slds-list__item">
              <a role="menuitem" href="#void">
                <p class="slds-truncate">
                  <span class="slds-icon_container slds-icon_container--circle slds-icon-action-share-post slds-m-right--medium">
                    <svg aria-hidden="true" class="slds-icon slds-icon--small">
                      <use xlink:href="/assets/icons/action-sprite/svg/symbols.svg#share_post"></use>
                    </svg>
                  </span>
                  <span>Post</span>
                </p>
              </a>
            </li>
            <li class="slds-list__item">
              <a role="menuitem" href="#void">
                <p class="slds-truncate">
                  <span class="slds-icon_container slds-icon_container--circle slds-icon-action-new-task slds-m-right--medium">
                    <svg aria-hidden="true" class="slds-icon slds-icon--small">
                      <use xlink:href="/assets/icons/action-sprite/svg/symbols.svg#new_task"></use>
                    </svg>
                  </span>
                  <span>New Task</span>
                </p>
              </a>
            </li>
            <li class="slds-list__item">
              <a role="menuitem" href="#void">
                <p class="slds-truncate">
                  <span class="slds-icon_container slds-icon_container--circle slds-icon-action-new-contact slds-m-right--medium">
                    <svg aria-hidden="true" class="slds-icon slds-icon--small">
                      <use xlink:href="/assets/icons/action-sprite/svg/symbols.svg#new_contact"></use>
                    </svg>
                  </span>
                  <span>New Contact</span>
                </p>
              </a>
            </li>
            <li class="slds-list__item">
              <a role="menuitem" href="#void">
                <p class="slds-truncate">
                  <span class="slds-icon_container slds-icon_container--circle slds-icon-action-new-opportunity slds-m-right--medium">
                    <svg aria-hidden="true" class="slds-icon slds-icon--small">
                      <use xlink:href="/assets/icons/action-sprite/svg/symbols.svg#new_opportunity"></use>
                    </svg>
                  </span>
                  <span>New Opportunity</span>
                </p>
              </a>
            </li>
            <li class="slds-list__item">
              <a role="menuitem" href="#void">
                <p class="slds-truncate">
                  <span class="slds-icon_container slds-icon_container--circle slds-icon-action-lead-convert slds-m-right--medium">
                    <svg aria-hidden="true" class="slds-icon slds-icon--small">
                      <use xlink:href="/assets/icons/action-sprite/svg/symbols.svg#lead_convert"></use>
                    </svg>
                  </span>
                  <span>Convert</span>
                </p>
              </a>
            </li>
            <li class="slds-list__item">
              <a role="menuitem" href="#void">
                <p class="slds-truncate">
                  <span class="slds-icon_container slds-icon_container--circle slds-icon-action-edit slds-m-right--medium">
                    <svg aria-hidden="true" class="slds-icon slds-icon--small">
                      <use xlink:href="/assets/icons/action-sprite/svg/symbols.svg#edit"></use>
                    </svg>
                  </span>
                  <span>Edit</span>
                </p>
              </a>
            </li>
          </ul>
        </div>
      </div>
      <div class="slds-action-overflow--touch__footer">
        <button class="slds-button slds-button--neutral">Cancel</button>
      </div>
    </div>
  </div>
  <div class="slds-backdrop slds-backdrop--open"></div>
</div>

An action overflow for touch is the list of actions that are usually secondary or tertiary to a task. These are usually utility actions like edit, delete, etc. This is specifically for touch devices.

Component Overview

The unordered menu list with [role="menu"] should be contained in a <div> with the class .slds-dropdown. The exception to this is the Action Overflow for Touch, which not a dropdown menu.

The target HTML element and dropdown need to be wrapped in the class .slds-dropdown-trigger slds-dropdown-trigger--click.

By default, dropdown menus do not display a nubbin (the little cute triangle pointing at your target). If you want to apply one, you can add the class that defines the nubbin position and .slds-nubbin--top to the .slds-dropdown HTML element.

See the Component Overview table for further nubbin support.

Accessibility

The main thing that distinguishes menus from other popover blocks is keyboard navigation: elsewhere, users press the Tab key to navigate through actionable items, but in a menu, users press the arrow keys to navigate.

Expected markup:

  • Menu trigger is a focusable element (<a> or <button>) with aria-haspopup="true"
  • Menu has role="menu" and an aria-labelledby attribute whose value is the id of the menu trigger
  • Menu items have role="menuitem", role="menuitemcheckbox", or role="menuitemradio"

Expected keyboard interactions:

  • Arrow keys cycle focus through menu items (you should use JS to disable focus for any disabled items)
  • Tab key closes menu and moves focus to the next focusable element on the page
  • Esc key closes menu and moves focus back to the menu trigger
  • Any character key moves focus to the next menu item that starts with that character, if applicable

Usage

This table gives you a quick overview of the SLDS CSS classes that can be applied to this component.
Class NameUsage
.slds-dropdown
Applied to:

<div>

Outcome:

Initializes dropdown

Required:

Required

Comments:

Applies positioning and container styles, by default, dropdown appears below and center of target

.slds-dropdown-trigger
Deprecated
Applied to:

<div>

Outcome:

Enables dropdown to show on hover

Required:

No, optional element or modifier

Comments:

The target HTML element and dropdown need to be wrapped in this class

.slds-dropdown-trigger--click
Applied to:

any element

Outcome:

Modifier that enables dropdown to show on click

Required:

No, optional element or modifier

Comments:

Forces display:none on dropdown, applying .slds-is-open to .slds-dropdown-trigger will show the dropdown

.slds-dropdown__item
Applied to:

<li>

Outcome:

Initializes dropdown item

Required:

Required

Comments:

--

.slds-dropdown--bottom
Applied to:

.slds-dropdown

Outcome:

Positions dropdown to above target

Required:

No, optional element or modifier

Comments:

--

.slds-dropdown--left
Applied to:

.slds-dropdown

Outcome:

Positions dropdown to left side of target

Required:

No, optional element or modifier

Comments:

--

.slds-dropdown--right
Applied to:

.slds-dropdown

Outcome:

Positions dropdown to right side of target

Required:

No, optional element or modifier

Comments:

--

.slds-dropdown--small
Applied to:

.slds-dropdown

Outcome:

Sets min-width of 15rem/240px

Required:

No, optional element or modifier

Comments:

--

.slds-dropdown--medium
Applied to:

.slds-dropdown

Outcome:

Sets min-width of 20rem/320px

Required:

No, optional element or modifier

Comments:

--

.slds-dropdown--large
Applied to:

.slds-dropdown

Outcome:

Sets min-width of 25rem/400px

Required:

No, optional element or modifier

Comments:

--

.slds-dropdown__header
Applied to:

Outcome:

Adds padding to area above dropdown menu list

Required:

No, optional element or modifier

Comments:

--

.slds-picklist
Applied to:

<div>

Outcome:

Initializes picklist

Required:

Required

Comments:

--

.slds-picklist--fluid
Applied to:

.slds-picklist

Outcome:

Forces width of picklist and picklist dropdown to inherit width of its content

Required:

No, optional element or modifier

Comments:

--

.slds-picklist__label
Applied to:

<button>

Outcome:

Custom select

Required:

Required

Comments:

--

.slds-nubbin--top
Applied to:

.slds-popover

Outcome:

Triangle that points upwards which is horizontally centered

Required:

No, optional element or modifier

Comments:

--

.slds-nubbin--top-left
Applied to:

.slds-popover

Outcome:

Triangle that points upwards which is left aligned

Required:

No, optional element or modifier

Comments:

--

.slds-nubbin--top-right
Applied to:

.slds-popover

Outcome:

Triangle that points upwards which is right aligned

Required:

No, optional element or modifier

Comments:

--

.slds-nubbin--bottom
Applied to:

.slds-popover

Outcome:

Triangle that points downwards which is horizontally centered

Required:

No, optional element or modifier

Comments:

--

.slds-nubbin--bottom-left
Applied to:

.slds-popover

Outcome:

Triangle that points downwards which is left aligned

Required:

No, optional element or modifier

Comments:

--

.slds-nubbin--bottom-right
Applied to:

.slds-popover

Outcome:

Triangle that points downwards which is right aligned

Required:

No, optional element or modifier

Comments:

--

.slds-dropdown--length-5
Applied to:

<ul>

Outcome:

Forces overflow scrolling after 5 list items

Required:

No, optional element or modifier

Comments:

--

.slds-dropdown--length-7
Applied to:

<ul>

Outcome:

Forces overflow scrolling after 7 list items

Required:

No, optional element or modifier

Comments:

--

.slds-dropdown--length-10
Applied to:

<ul>

Outcome:

Forces overflow scrolling after 10 list items

Required:

No, optional element or modifier

Comments:

--

.slds-dropdown--length-with-icon-5
Applied to:

<ul>

Outcome:

Forces overflow scrolling after 5 list items

Required:

No, optional element or modifier

Comments:

Use if an icon is within the list items

.slds-dropdown--length-with-icon-7
Applied to:

<ul>

Outcome:

Forces overflow scrolling after 7 list items

Required:

No, optional element or modifier

Comments:

Use if an icon is within the list items

.slds-dropdown--length-with-icon-7
Applied to:

<ul>

Outcome:

Forces overflow scrolling after 10 list items

Required:

No, optional element or modifier

Comments:

Use if an icon is within the list items

.slds-is-selected
Applied to:

.slds-dropdown__item

Outcome:

Applies selected state to dropdown item

Required:

No, optional element or modifier

Comments:

Class modifies the visibility of .slds-icon-selected

.slds-icon--selected
Applied to:

<svg>

Outcome:

Creates icon when a user selects a .slds-dropdown__item

Required:

No, optional element or modifier

Comments:

--

.slds-dropdown--nubbin-top
Applied to:

.slds-dropdown

Outcome:

Applies triangle indicator pointing at content

Required:

No, optional element or modifier

Comments:

Deprecated

.slds-has-icon
Applied to:

.slds-dropdown__item

Outcome:

Lets dropdown item know how to position icon

Required:

No, optional element or modifier

Comments:

Deprecated

.slds-has-icon--left
Applied to:

.slds-dropdown__item

Outcome:

Position icon in dropdown item to the left

Required:

No, optional element or modifier

Comments:

Deprecated

.slds-has-icon--right
Applied to:

.slds-dropdown__item

Outcome:

Position icon in dropdown item to the right

Required:

No, optional element or modifier

Comments:

Deprecated

.slds-action-overflow--touch
Applied to:

div

Outcome:

Positions the Action overflow for touch to take up full screen

Required:

No, optional element or modifier

Comments:

--

.slds-action-overflow--touch__container
Applied to:

div

Outcome:

Pushes the menu to the bottom of the screen.

Required:

No, optional element or modifier

Comments:

--

.slds-action-overflow--touch__content
Applied to:

div

Outcome:

Creates a scrolling area that is pushed down the screen by a third of the viewport height.

Required:

No, optional element or modifier

Comments:

--

.slds-action-overflow--touch__body
Applied to:

div

Outcome:

Draws the white menu.

Required:

No, optional element or modifier

Comments:

--

.slds-action-overflow--touch__footer
Applied to:

div

Outcome:

Creates the footer for the Cancel button.

Required:

No, optional element or modifier

Comments:

--